<template>
    <div>
        <el-dialog :title="props.id === 0 ? '添加退货原因' : '编辑退货'" :model-value="props.dialogFormVisible" @close="cancelFb">
            <el-form :model="form" label-width="120px">
                <el-form-item label="原因类型">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort" />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="0">不启用</el-radio>
                        <el-radio :label="1">启用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, watch } from 'vue';
import * as http from '@/request/http'
const form = reactive({
    createTime:'2021-07-18',
    id: 0,
    name: "",
    sort: 0,
    status: 0,
    
})

const props = withDefaults(defineProps<{
    id: number,
    dialogFormVisible: boolean
}>(), {
    id: 0, // 设置id 默认值
    dialogFormVisible: false // 默认值

})
console.log("id", props.id);


watch(() => props.id,
    () => {
        console.log(props.id);
        http.reReas.ReturnReasonId(props.id).then((res) => {
            console.log(res.data);
            form.name = res.data.name
            form.sort = res.data.sort
            form.status = res.data.status
        })

    }
)

const emits = defineEmits<{
    (e: "cancel"): void;
    (e: "confirm"): void;
}>();
const cancel = () => {
    emits('cancel')
}

const cancelFb = () => {
    emits('cancel')
}

//添加退货原因
const AddReturns = () => {
    ElMessageBox.confirm(
        '确定要添加退货原因吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            console.log(form.id);
            //发起请求，添加原因
            http.reReas.ReturnReasonCreate(form).then((res) => {
                if (res.code == 200) {
                    ElMessage.success("成功添加")
                    emits("confirm");
                }
            })

        })
        .catch(() => {
            ElMessage.warning('取消添加成功')
        })
}
//编辑退货
const EditReturns = () => {

    //发起请求，编辑退货
    http.reReas.ReturnReasonUpdate(props.id,form).then((res) => {
        if (res.code == 200) {
            ElMessage.success("成功添.加")
            emits("confirm");
        }
    }).catch(() => {
        ElMessage.warning('取消添加成功')
    })

}

const onSubmit = () => {
    if (props.id == 0) {
        AddReturns()
    } else {
        EditReturns()
    }
}

</script>

<style scoped>
:deep(.el-dialog) {
    width: 600px;
}
</style>